<template>
    <div class="basicInfor">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" :label-width="labelWidth">
            <el-form-item :label="$t('message.systemName')" prop="SystemName">
                <el-select filterable v-model="ruleForm.SystemName" :placeholder="$t('message.enterMore')">
                    <el-option v-for="(item, index) in systemNames" :key="index" :label="item.label" :value="item.value"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item :label="$t('message.systemEnName')" prop="EnglishName">
                <el-input v-model="ruleForm.EnglishName" disabled></el-input>
            </el-form-item>
            <el-form-item :label="$t('message.status')" prop="SystemStatus">
                <el-radio-group v-model="ruleForm.SystemStatus">
                    <el-radio :label="1">有效</el-radio>
                    <el-radio :label="2">无效</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item :label="$t('message.systemURL')" prop="SystemURL">
                <el-input v-model="ruleForm.SystemURL" :placeholder="$t('message.pleaseEnterSystemURL')"></el-input>
            </el-form-item>
            <el-form-item :label="$t('message.describe')" prop="Description">
                <el-input type="textarea" :rows="5" :placeholder="$t('message.pleaseEnterDescribe')" v-model="ruleForm.Description"></el-input>
            </el-form-item>
            <el-form-item>
                <el-tooltip class="item" effect="dark" :content="$t('message.back')" placement="top">
                    <el-button type="primary" @click="back()" icon="iconfont icon-fanhui"></el-button>
                </el-tooltip>
                <el-tooltip class="item" effect="dark" :content="$t('message.save')" placement="top">
                    <el-button type="primary" @click="saveBasic('ruleForm')" icon="iconfont icon-gou-wukuang"></el-button>
                </el-tooltip>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    import { baseUrl, baseImgPath } from "@/config/env";
    import { getStore, getLocal } from "../../config/mUtils"
	export default {
		name: "basic",
        data() {
            return {
                baseUrl,
                baseImgPath,
                systemNames: [
                    {
                        label: 'EM系统',
                        value: 'EM'
                    }, {
                        label: 'E-Order系统',
                        value: 'E-Order',
                    }
                ],
                ruleForm: {
                    SystemName: "",
                    EnglishName: "",
                    SystemStatus: 1,
                    SystemURL: "",
                    Description: ""
                },
                labelWidth : 0 + 'px'
            };
        },
        computed: {
            rules: function() {
                return {
                    SystemName: [{ required: true, message: "请填写系统名称", trigger: "change" }]
                }
            },
        },
        created() {
            // this.initData();
            this.resetLabelWidth();
        },
        mounted() {},
        methods: {
            resetLabelWidth() {
                if (getLocal('language') === 'en_US') {
                    this.labelWidth = 140 + 'px';
                } else {
                    this.labelWidth = 150 + 'px';
                }
            },
            async initData() {
                /**获取用户列表 */
                try {
                    this.getLanguageResource();
                    this.getSystemList();
                } catch (err) {
                    console.log("获取数据失败", err);
                }
            },
            back() {
                this.$router.push('/businessManage');
            },
            saveBasic(formName) {
                this.$refs[formName].validate(async valid => {
                    if (valid) {
                    } else {
                        return false;
                    }
                });
            },
        }
	}
</script>

<style scoped>

</style>
